<template>
  <view class="home-container">
    <!-- 欢迎区域 -->
    <view class="welcome-section">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="app-title">家校合作平台</text>
      <text class="app-subtitle">连接学校与家庭的桥梁</text>
    </view>

    <!-- 功能介绍 -->
    <view class="features-section">
      <view class="feature-title">
        <text>平台功能</text>
      </view>
      <view class="features-grid">
        <view v-for="feature in features" :key="feature.id" class="feature-card">
          <view class="feature-icon">{{ feature.icon }}</view>
          <text class="feature-name">{{ feature.name }}</text>
          <text class="feature-desc">{{ feature.description }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="primary-btn" @click="goToLogin">
        <text>立即登录</text>
      </button>

      <button class="secondary-btn" @click="showDemo">
        <text>演示功能</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 响应式数据
const features = ref([
  {
    id: 1,
    icon: '👥',
    name: '用户管理',
    description: '多角色权限管理'
  },
  {
    id: 2,
    icon: '📚',
    name: '学生档案',
    description: '完整的学生信息管理'
  },
  {
    id: 3,
    icon: '📝',
    name: '记录管理',
    description: '表扬批评记录'
  },
  {
    id: 4,
    icon: '📊',
    name: '数据统计',
    description: '可视化数据分析'
  },
  {
    id: 5,
    icon: '📱',
    name: '实时通知',
    description: '即时消息推送'
  },
  {
    id: 6,
    icon: '🔒',
    name: '安全可靠',
    description: '数据安全保障'
  }
])

// 生命周期
onMounted(() => {
  console.log('首页加载完成')
})

// 方法
/**
 * 跳转到登录页
 */
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/auth/login'
  })
}

/**
 * 显示演示功能
 */
const showDemo = () => {
  uni.showModal({
    title: '演示功能',
    content: '请先登录体验完整功能\n\n测试账号：\n管理员: admin/123456\n班主任: teacher/123456\n家长: parent/123456',
    showCancel: false,
    confirmText: '去登录',
    success: () => {
      goToLogin()
    }
  })
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

// 欢迎区域
.welcome-section {
  text-align: center;
  margin-bottom: 60px;

  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .app-title {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
  }

  .app-subtitle {
    display: block;
    font-size: 16px;
    color: #7f8c8d;
  }
}

// 功能介绍
.features-section {
  margin-bottom: 60px;

  .feature-title {
    text-align: center;
    margin-bottom: 32px;

    text {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    .feature-card {
      background: white;
      border-radius: 16px;
      padding: 24px 16px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .feature-icon {
        font-size: 40px;
        margin-bottom: 12px;
        display: block;
      }

      .feature-name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 6px;
      }

      .feature-desc {
        display: block;
        font-size: 12px;
        color: #7f8c8d;
        line-height: 1.4;
      }
    }
  }
}

// 操作按钮
.action-section {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .primary-btn {
    height: 52px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
  }

  .secondary-btn {
    height: 48px;
    background: white;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    color: #667eea;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
      background: #f8f9ff;
      border-color: #667eea;
    }
  }
}

// 响应式设计
@media (max-width: 400px) {
  .home-container {
    padding: 30px 16px;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}
</style>
